<template>
	<view class="home-banner">
		<swiper
			class="swiper" 
			circular 
			autoplay 
			interval="3000"
			previous-margin="50rpx"
			next-margin="50rpx"
			@change="onSwiperChange">
			<swiper-item class="item" v-for="(item, index) in list" :key="index" >
				<image 
					class="pic" 
					:class="{current: current === index}"
					:src="item.image" 
					mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<view class="dots row center">
			<view class="dot" :class="{current: current === index}" v-for="(item, index) in list" :key="index"></view>
		</view>
	</view>
</template>

<script>
    /**
     * 轮播图
     * @description 此组件一般用于多个图片滚动显示。
     * @tutorial https://www.dfer.site
     * @property {Array} list 图片列表
     * @example <dfer-banner :list="list" />
     */
	export default {
		name:"dfer-banner",
		data() {
			return {
				current: 0
			};
		},
		props: {
			list: {
				type: Array,
				default(){
					return []
				}
			}
		},
		methods: {
			onSwiperChange(e){
				this.current = e.detail.current;
			}
		}
	}
</script>

<style scoped lang="scss">
	.home-banner{
		width: 100%;
		position: relative;
		background-color: #fff;
	}
	.swiper{
		height: 220rpx;
	}
	.pic{
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		transform: scale(0.94, 0.88);
		transition: transform .36s;
		&.current{
			transform: scale(1);
		}
	}
	.dots{
		position: absolute;
		left: 0;
		bottom: 12rpx;
		width: 100%;
	}
	.dot{
		width: 32rpx;
		height: 8rpx;
		margin: 0 6rpx;
		background-color: #fff;
		border-radius: 10px;
		&.current{
			background-color: #ff536f;
		}
	}
</style>
